<template>

    <div class="app-body">
        <div class="app-search">
            <el-form :inline="true" class="demo-form-inline" v-model="form">
                <el-form-item label="">
                    <el-input placeholder="标签名称" v-model="form.studentName"><template #suffix style="width: 180px;">
                            <el-icon class="el-input__icon">
                                <img src="../../assets/refund_search.png" alt="">
                            </el-icon>
                        </template></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-input placeholder="姓名" v-model="form.studentName"><template #suffix style="width: 180px;">
                            <el-icon class="el-input__icon">
                                <img src="../../assets/refund_search.png" alt="">
                            </el-icon>
                        </template></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-input placeholder="学号" v-model="form.studentNumber"><template #suffix style="width: 180px;">
                            <el-icon class="el-input__icon">
                                <img src="../../assets/refund_search.png" alt="">
                            </el-icon>
                        </template></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button class="serach_btn" type="primary" @click="onSubmit"
                        @keyup.enter="searchEnter">搜索</el-button>
                </el-form-item>
            </el-form>
            <div class="buttonBox flex">
                <div class="button"><img src="../../assets/refund_icon2.png"><span>批量添加</span></div>
                <div class="button"><img src="../../assets/refund_icon2.png"><span>下载模版</span></div>
                <div class="button"><img src="../../assets/refund_icon2.png"><span>添加</span></div>
            </div>
        </div>

        <el-table :data="list" header-row-class-name="table_header" size="large"
            :header-cell-style="{ background: '#F0F0F0', color: '#999999', height: '50px', }" style="color: #5B5A7E;">
            <el-table-column type="index" width="60" label="序号" />
            <el-table-column prop="paymentName" label="任务名称" width="280" />
            <el-table-column prop="studentName" label="学生姓名" width="100" />
            <el-table-column prop="studentNumber" label="学生学号" width="120" />
            <el-table-column prop="applyReason" label="申请原因" min-width="250" />
            <el-table-column prop="createTime" label="申请时间" width="210" />
            <el-table-column prop="statusName" label="退费状态" width="110">
                <template style="display: block" #default="scope">
                    <p style="margin: 0;" v-if="scope.row.status == 0">未审批</p>
                    <p style="margin: 0;" v-if="scope.row.status == 1 || scope.row.status == 2">审批中</p>
                    <p style="margin: 0;" v-if="scope.row.status == 9">已通过</p>
                    <p style="margin: 0;" v-if="scope.row.status == 3">未通过</p>
                    <p style="margin: 0;" v-if="scope.row.status == 4">已退费</p>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="420px">
                <template style="display: block" #default="scope">
                    <div class="flex">
                        <el-button class="del_btn" size="small" type="danger" v-if="scope.row.status == 0"
                            @click="approveHandle(scope.row)">审批
                        </el-button>

                    </div>
                </template>
            </el-table-column>
            <template v-slot:empty>
                <el-empty description="暂无数据"></el-empty>
            </template>
        </el-table>
        <div style="margin-top: 10px">
            <el-config-provider :locale="locale">
                <el-pagination :total="total" :page-size="pageSize" :current-page="page"
                    :page-sizes="[5, 10, 20, 30, 40, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
                    @size-change="changePageSize" @current-change="changeCurrentPage">
                </el-pagination>
            </el-config-provider>
        </div>
    </div>

    <!-- </div>   -->
</template>
<script>
import { ElConfigProvider, ElMessageBox, ElMessage, backtopEmits } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { httpService } from "@/utils/httpService";
import { formatTime1 } from "@/utils/dateFormat";
import { Picture as IconPicture, Upload } from "@element-plus/icons-vue";
// import refundDetail from "./refundDetail.vue"
// import addEditApprovalRefund from "./addEditApprovalRefund.vue"
export default {
    name: "ReviewStudentListView",
    data() {
        return {
            type: 0,
            title: "",
            page: 1,
            pageSize: 10,
            total: 0,
            list: [],
            name: "",
            map: {},
            classInfos: [],
            gradeIds: [],
            dialogVisible: false,
            dialogId: "",
            dialogType: "",
            form: {
                year: "",
                type: "",
                studentName: "",
                studentNumber: "",
            },

        };
    },
    components: {
        ElConfigProvider,
        ElMessageBox,
        ElMessage,
        // refundDetail,
        // addEditApprovalRefund,
    },
    setup() {
        return {
            locale: zhCn,
        };
    },
    mounted() {
        this.getStudentLabelList();
    },
    methods: {
        searchEnter: function (e) {
            // 使用 which 和 keyCode 属性来解决兼容问题
            var keyCode = window.event ? e.keyCode : e.which;
            var val = e.target.value;
            if (keyCode == 13 && val) {
                this.getStudentLabelList();
            }
        },
        deleteRefund(id) {
            ElMessageBox.confirm("确定要删除本条记录吗？", "提醒", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    httpService("/javaApi/paymentRefund/deleteById", "id=" + id, "post").then(
                        (data) => {
                            if (data.code == 200) {
                                ElMessage.success("删除成功");
                                this.getStudentLabelList();
                            } else {
                                ElMessage.error("删除失败，请重试！");
                            }
                        }
                    );
                })
                .catch(() => {
                });
        },

        onSubmit() {
            this.getStudentLabelList();
        },
        changePageSize(size) {
            this.pageSize = size;
            this.getStudentLabelList();
        },
        changeCurrentPage(page) {
            this.page = page;
            this.getStudentLabelList();
        },
        getStudentLabelList() {
            httpService(
                "/javaApi/paymentRefund/list/" + this.page + "/" + this.pageSize,
                {},
                "get"
            ).then((data) => {
                this.list = data.list;
                this.total = data.total;
            });
        },

        approveHandle(data) {
            this.$refs.addEditApprovalRefund.dialogFormVisible = true
            this.$refs.addEditApprovalRefund.addApprovalForm.id = data.id
            this.$refs.addEditApprovalRefund.addApprovalForm.type = data.type
        }

    },
};
</script>
<style scoped>
/* *{
    margin: 0;
    padding: 0;
} */
.flex {
    display: flex;
    align-items: center;
}

.app-table {
    background: #eff3f5;
    padding: 5px 10px 10px;
}

.app-search {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.el-form {
    flex: 1;
}

.buttonBox {
    white-space: nowrap;
    line-height: 32px;
    margin-right: 25px;
}

.button {
    display: flex;
    align-items: center;
    color: #666E79;
    font-size: 16px;
    margin-left: 30px;
    cursor: pointer;
}

.button img {
    margin-right: 5px;
}

.app-body {
    background: white;
    margin-bottom: 10px;
    min-height: calc(100vh -175px);
    margin-top: 10px;
}

.serach_btn {
    background-color: #007EFF;
    color: #fff;
    border-radius: 8px;
    border: none;
}

.add_btn {
    background-color: #00c78c;
    color: #fff;
    border-radius: 8px;
    border: none;
}

.export_btn {
    background-color: #FF7200;
    border-radius: 8px;
    color: #fff;
    border: none;
}

.edit_btn {
    background-color: #007EFF;
    color: #fff;
    border-radius: 3px;
    width: 75px;
    height: 32px;
    font-size: 14px;
}

.del_btn {
    background-color: #FF7200;
    color: #FFF;
    border-radius: 3px;
    width: 75px;
    height: 32px;
    font-size: 14px;
}

.down_btn {
    background-color: #fff;
    border: 1px solid #0065FF;
    border-radius: 3px;
    color: #0065FF;
    width: 87px;
    height: 32px;
    font-size: 14px;
}


.table_header {
    border-radius: 5px 5px 0 0 !important;
}

.btnBox {
    font-size: 14px;
    color: #0065FF;
    margin-left: 20px;
}

.btnBox p {
    cursor: pointer;
    margin: 0;
    white-space: nowrap;
}

.xian {
    width: 1px;
    height: 10px;
    background-color: #8E8E8E;
    margin: 0 10px;
}

.tebleHeader {
    background-color: #0065FF;
}

.aaaaaa {
    background-color: #FF7200 !important;
}
</style>
